<template>
  <div>
    <Navigation class="el-header"></Navigation>
    <div class="center">
      <VideoCards :videos="videos">
      </VideoCards>
      <hr>
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="9"
          :hide-on-single-page=true
          layout="total, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Navigation from "@/components/navigation/Navigation";
import VideoCards from "@/components/video/VideoCards";
import {VideoApi} from "@/api/video_api";

export default {
  name: "Videos",
  data() {
    return {
      "videos": [],
      currentPage: 1,
      total: 0,
    }
  },
  components: {VideoCards, Navigation},
  created() {
    let api = new VideoApi();
    let outer = this;
    api.get().then(
        function (res) {
          outer.videos = res.data.videos
          outer.total = res.data.total
        }
    )
  },
  methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
}
</script>

<style scoped>
.center {
  width: 700px;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>